<template>
  <div style="">
    <div class="login-wrap">
      <div style="font-size: 60px;">
        <a href="#" style="display: flex;justify-content: center;padding-top: 20px;color:#545454;text-decoration: none;">LO<span style="color: #c4c4c4">V</span><span>O</span> | 朗沃商城</a>
      </div>
      <div style="display: flex">
        <div style="width: 1000px;text-align:center">
          <p style="font-size: 45px;color: white;padding-top: 140px">成功起点，LOVO首选</p>
          <p style="font-size: 26px;color:#d3d3d3;">优质产品，超低价格，太好逛了吧</p>
          <p style="font-size: 26px;color:#d3d3d3;">好生活，购实惠</p>
        </div>
        <div style="display: flex;padding-top: 90px">
          <el-card class="box-card" style="width: 240px">
            <div style="margin-bottom: 20px">
              <span style="margin-bottom: 20px;font-size: 16px">快速注册</span>
              <el-link type="success" @click="$router.push('newLogin')" style="margin-left: 80px">用户登录</el-link>
              <!--              <el-button style="margin-bottom: 20px" type="text">快速注册</el-button>-->
            </div>
            <div>
              <el-form :model="registerFrom" :rules="rules" ref="registerFrom" label-width="0px">
                <el-form-item prop="userName">
                  <div style="display: flex">
                    <el-input v-model="registerFrom.userName" placeholder="请输入用户名" @change="isExistUserName" style="width: 200px;">
                      <template #prefix>
                        <el-icon><UserFilled /></el-icon>
                      </template>
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item prop="userPassword">
                  <div style="display: flex">
                    <el-input type="password" v-model="registerFrom.userPassword" placeholder="请输入密码" style="width: 200px;">
                      <template #prefix>
                        <el-icon><Lock /></el-icon>
                      </template>
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item prop="ackPassword">
                  <el-input type="password" v-model="registerFrom.ackPassword" placeholder="请输入确认密码" style="width: 200px;">
                    <template #prefix>
                      <el-icon><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="userRealName">
                  <el-input v-model="registerFrom.userRealName" placeholder="请输入真实姓名" style="width: 200px;">
                    <template #prefix>
                      <el-icon>
                        <avatar />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="userGender">
                  <el-radio-group v-model="registerFrom.userGender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item prop="userPhone">
                  <el-input v-model="registerFrom.userPhone" placeholder="请输入联系电话" style="width: 200px;">
                    <template #prefix>
                      <el-icon>
                        <iphone />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <div>
                  <el-button type="primary" @click="userRegister()" style="width: 200px;">注册</el-button>
                </div>
              </el-form>
            </div>
          </el-card>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "Register",
  data() {
    return {
      registerFrom: {
        userGender:'男',
      },
      rules: {
        userName:[
          {required:true,message:'请输入用户名',trigger:'blur'},
        ],
        userRealName:[
          {required:true,message:'请输入真实姓名',trigger:'blur'},
          {pattern: /^[\u4E00-\u9FA5]{1,10}$/, message: '请输入正确的姓名', trigger: 'blur'}
        ],
        userPassword:[
          {required:true,message:'请输入密码',trigger:'blur'},
        ],
        ackPassword:[
          {required:true,message:'请确认密码',trigger:'blur'},
        ],
        userPhone:[
          {required:true,message:'请输入电话号码',trigger:'blur'},
          {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur'}
        ],
      },
      isExist:false,
    }
  },
  methods: {
    //用户注册
    userRegister(){
      if (this.registerFrom.userPassword===this.registerFrom.ackPassword){
        this.$refs['registerFrom'].validate((valid)=>{
          if (valid&&this.isExist){
            //表单验证成功
            axios.post('api/user/userFastRegister',this.registerFrom).then(p=>{
              if (p.data.code==200){
                this.$notify({
                  title: '成功',
                  message: p.data.msg,
                  type: 'success',
                });
                this.$router.push('newLogin')
                this.registerFrom={};//清除表单
              }
              else{
                this.$notify.error({
                  title: '错误',
                  message: p.data.msg,
                })
                this.registerFrom={};//清除表单
              }
            })
          }else {
            this.$notify({
              title: '警告',
              message: '请完成信息填写，谢谢',
              type: 'warning',
            })
            return false;
          }
        })
      }

    },
    isExistUserName(){
      axios.get('api/user/isExistUserName?userName='+this.registerFrom.userName).then(p=>{
        if (p.data.code!==200){
          ElMessage.error(p.data.msg);
        }else{
          this.isExist=true;
        }
      })
    },
  },
}
</script>

<style>
#app{
  height: 100%;
}
body>div>div{
  height: 100%;
}
html{
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
div{

}

.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  /*background-image: url(../assets/img/login-bg.jpg);*/
  /*background-color: #2d8cf0;*/
  /* 背景渐变色 - 原理2 */
  /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
  background: linear-gradient(-45deg, #FA8BFF, #2BD2FF, #2BFF88);
  /* 背景尺寸 - 原理3 */
  background-size: 600% 600%;
  /* 循环动画 - 原理4 */
  animation: gradientBG 7s ease infinite;

  /*background-size: 100%;*/


}

/* 动画，控制背景 background-position */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>